<template>
  <div class="box">
    <div class="header">
      <span class="news" @click="onclickLeft"
        ><img src="../../../public/消息图标.png" alt=""
      /></span>
      <span class="find">发现</span>
      <span class="big" @click="onclickRight"
        ><img src="../../../public/搜索.png" alt=""
      /></span>
    </div>
    <div class="box5">
      <div class="nav">
        <div class="nav1">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="item in state.images" :key="item.id">
              <img :src="item.url" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="banner">
        <div class="banner-t">
          <p>早茶电台 ></p>
          <span>
            <img :src="require('../../../public/形状 6.png')" alt="" />
            播放全部
          </span>
        </div>
        <div class="banner-b">
          <p>
            <img :src="require('../../../public/组 1.png')" alt="" />
            <span>阿森 | 书籍的千年穿越</span>
          </p>
          <p>
            <img :src="require('../../../public/组 1.png')" alt="" />
            <span>赵健小书摊 | 少年不识愁滋味</span>
          </p>
        </div>
      </div>
      <div class="main">
        <div class="main-t">
          <p>为你推荐</p>
        </div>
        <div class="main-nav">
          <div class="main-nav-l">
            <van-tabs v-model:active="active" color="#FDD000">
              <van-tab title="关注"></van-tab>
              <van-tab title="推荐">
                <div class="main-b">
                  <div class="main-b-l">
                    <div class="box1" v-for="item in 3" :key="item">
                      <div class="one" @click="enter">
                        <img
                          src="../../../public/faxian/find3.png"
                          alt=""
                          class="datu"
                        />
                        <h5>你能接受你的孩子平庸吗？</h5>
                        <div class="xinxi">
                          <p>
                            <img
                              src="../../../public/faxian/亲子头像.png"
                              alt=""
                              class="a1"
                            />
                            <span>亲子育儿</span>
                          </p>
                          <p>
                            <span>109</span>
                            <img
                              :src="require('../../../public/sppl-2.png')"
                              alt=""
                              class="a2"
                            />
                          </p>
                        </div>
                      </div>
                      <div class="one" @click="enter">
                        <img
                          src="../../../public/faxian/find1.png"
                          alt=""
                          class="datu"
                        />
                        <h5>真爱来了，什么时候结婚都 不迟</h5>
                        <div class="xinxi">
                          <p>
                            <img
                              :src="
                                require('../../../public/faxian/图层 5.png')
                              "
                              alt=""
                              class="a1"
                            />
                            <span>亲密关系</span>
                          </p>
                          <p>
                            <span>13</span>
                            <img
                              :src="require('../../../public/sppl-2.png')"
                              alt=""
                              class="a2"
                            />
                          </p>
                        </div>
                      </div>
                      <div class="two">
                        <img
                          :src="require('../../../public/组 2.png')"
                          alt=""
                        />
                        <h3>身边人都劝你找对象 要求别那么高，你会 怎么办？</h3>
                        <p><span>127个讨论</span><span>4979次浏览</span></p>
                      </div>
                    </div>
                  </div>
                  <div class="main-b-r">
                    <div class="box2" v-for="item in 3" :key="item">
                      <div class="two">
                        <img
                          :src="require('../../../public/组 2.png')"
                          alt=""
                        />
                        <h3>在亲密关系中 你 要的是幸福 还是对 错？</h3>
                        <p><span>189个讨论</span><span>1.7万次浏览</span></p>
                      </div>
                      <div class="one" @click="enter">
                        <img
                          src="../../../public/faxian/find3.png"
                          alt=""
                          class="datu"
                        />
                        <h5>
                          有钱如思聪也买不来的爱 情，要如何做才能追求到...
                        </h5>
                        <div class="xinxi">
                          <p>
                            <img
                              :src="
                                require('../../../public/faxian/图层 5.png')
                              "
                              alt=""
                              class="a1"
                            />
                            <span>亲密关系</span>
                          </p>
                          <p>
                            <span>22</span>
                            <img
                              :src="
                                require('../../../public/faxian/图层 5.png')
                              "
                              alt=""
                              class="a2"
                            />
                          </p>
                        </div>
                      </div>
                      <div class="one" @click="enter">
                        <img
                          src="../../../public/faxian/find2.png"
                          alt=""
                          class="datu"
                        />
                        <h5>父母经常忽视孩子的后果会 有多严重？</h5>
                        <div class="xinxi">
                          <p>
                            <img
                              src="../../../public/faxian/亲子头像.png"
                              alt=""
                              class="a1"
                            />
                            <span>亲子育儿</span>
                          </p>
                          <p>
                            <span>11</span>
                            <img
                              :src="require('../../../public/sppl-2.png')"
                              alt=""
                              class="a2"
                            />
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-tab>
              <van-tab title="精选视频"></van-tab>
              <van-tab title="亲子育儿"></van-tab>
              <van-tab title="终身成长"></van-tab>
            </van-tabs>
          </div>
          <img :src="require('../../../public/矩形.png')" alt="" class="jux" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onBeforeMount } from "vue";
import { getFindApi } from "../../utils/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const active = ref(1);
    const onclickLeft = () => {
      router.push("/news");
    };
    const onclickRight = () => {
      router.push("/search");
    };
    const state = reactive({
      images: [],
    });
    const enter = () => {
      router.push("/video");
    };
    onBeforeMount(async () => {
      const res = await getFindApi();
      state.images = res.data.result;
    });
    return { state, active, onclickLeft, onclickRight, enter };
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 100;
    .news {
      vertical-align: middle;
    }
    .find {
      font-size: 16px;
      color: #000;
      font-weight: 600;
      height: 29px;
      line-height: 29px;
    }
    .big {
      vertical-align: middle;
    }
  }
  .box5 {
    margin-top: 49px;
    .nav {
      display: flex;
      justify-content: center;
      .nav1 {
        width: 90%;
        img {
          width: 268px;
          height: 135px;
        }
      }
    }
    .banner {
      display: flex;
      flex-direction: column;
      padding: 0 16px;
      margin-top: 20px;
      .banner-t {
        display: flex;
        justify-content: space-between;
        p {
          font-size: 18px;
          font-weight: 600;
          line-height: 28px;
        }
        span {
          display: inline-block;
          width: 96px;
          height: 28px;
          font-size: 14px;
          color: #4a4746;
          border: 1px solid #f1f1f1;
          text-align: center;
          line-height: 28px;
          border-radius: 14px;
        }
      }
      .banner-b {
        margin-top: 10px;
        p {
          height: 35px;
          img {
            vertical-align: middle;
          }
          span {
            margin-left: 11px;
            font-size: 14px;
            color: #4a4746;
            vertical-align: middle;
          }
        }
      }
    }
    .main {
      .main-t {
        margin-left: 16px;
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        margin-top: 20px;
      }
      .main-nav {
        position: relative;
        .main-nav-l {
          width: 90%;
          margin-left: 2px;
          /deep/.van-tab {
            flex: none;
            margin-left: 12px;
          }
          /deep/.van-tabs__line {
            width: 24px;
            height: 4px;
          }
          /deep/.van-tab--active {
            font-weight: 600;
          }
          .van-tab__pane {
            .main-b {
              display: flex;
              margin-top: 9px;
              justify-content: space-between;
              .main-b-l {
                .box1 {
                  .one {
                    padding-bottom: 5px;
                    margin-top: 4px;
                    .datu {
                      display: inline-block;
                      width: 183px;
                      height: 115px;
                    }
                    h5 {
                      margin-bottom: 5px;
                      margin-top: 12px;
                      margin-left: 9px;
                      margin-right: 4px;
                      font-size: 13px;
                      color: #333;
                      line-height: 20px;
                    }
                    .xinxi {
                      display: flex;
                      justify-content: space-between;
                      .a1 {
                        display: inline-block;
                        height: 20px;
                        width: 20px;
                        border-radius: 50%;
                        background: red;
                        vertical-align: middle;
                        margin-left: 7px;
                        margin-right: 5px;
                      }
                      span {
                        font-size: 10px;
                        color: #999;
                        vertical-align: middle;
                      }
                      .a2 {
                        margin-right: 8px;
                        margin-left: 5px;
                        vertical-align: middle;
                      }
                    }
                  }
                  .two {
                    margin-top: 4px;
                    width: 184px;
                    height: 200px;
                    border-radius: 5px;
                    background-image: linear-gradient(#d4d397, #b8b776);
                    padding: 10px;
                    position: relative;
                    h3 {
                      width: 157px;
                      margin-top: 8px;
                      font-size: 18px;
                      color: #fff;
                    }
                    p {
                      font-size: 9px;
                      color: #fff;
                      position: absolute;
                      bottom: 12px;
                      span {
                        margin-right: 11px;
                      }
                    }
                  }
                }
              }
              .main-b-r {
                margin-left: 2.5px;
                .box2 {
                  .one {
                    margin-top: 4px;
                    padding-bottom: 5px;
                    .datu {
                      display: inline-block;
                      width: 183px;
                      height: 115px;
                    }
                    h5 {
                      margin-bottom: 5px;
                      margin-top: 12px;
                      margin-left: 9px;
                      margin-right: 4px;
                      font-size: 13px;
                      color: #333;
                      line-height: 20px;
                    }
                    .xinxi {
                      display: flex;
                      justify-content: space-between;
                      .a1 {
                        display: inline-block;
                        height: 20px;
                        width: 20px;
                        border-radius: 50%;
                        background: red;
                        vertical-align: middle;
                        margin-left: 7px;
                        margin-right: 5px;
                      }
                      span {
                        font-size: 10px;
                        color: #999;
                        vertical-align: middle;
                      }
                      .a2 {
                        margin-right: 8px;
                        margin-left: 5px;
                        vertical-align: middle;
                      }
                    }
                  }
                  .two {
                    margin-top: 4px;
                    width: 184px;
                    height: 200px;
                    border-radius: 5px;
                    background-image: linear-gradient(#f68f8f, #e76e6e);
                    padding: 10px;
                    position: relative;
                    h3 {
                      width: 157px;
                      margin-top: 8px;
                      font-size: 18px;
                      color: #fff;
                    }
                    p {
                      font-size: 9px;
                      color: #fff;
                      position: absolute;
                      bottom: 12px;
                      span {
                        margin-right: 11px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .jux {
          position: absolute;
          right: 16px;
          top: 13px;
        }
      }
    }
  }
}
</style>
